{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线记录你的灵感</title>
    {#        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css">#}
    <link rel="stylesheet" href="{% static '/layui/css/layui.css' %}">
</head>

<script src="{% static '/layui/layui.js' %}"></script>
<style>
    .div-three_mesg {
        display: inline
    }
</style>
<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item layui-this"><a href="{% url 'index' %}">灵感广场</a></li>
    <li class="layui-nav-item"><a href="{% url 'mysparks' %}?user_id={{ request.session.user_id }}">我的灵感</a></li>
    <li class="layui-nav-item ">
        <a href="javascript:;"><i class="layui-icon layui-icon-user layui-font-orange">{{ request.session.user_name }} </i></a>
        <dl class="layui-nav-child "> <!-- 二级菜单 -->
            <dd><a href="{% url 'login' %}">登陆</a></dd>
            <dd><a href="{% url 'logout' %}">退出</a></dd>
        </dl>
    </li>
</ul>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>
<body bgcolor="#f0f0f4">

<form class="layui-form layui-main" action="{% url 'add_spark' %} " method="POST">
    {% csrf_token %}
    <div class="layui-form-item layui-main">
{#        <label class="layui-form-label ">输入框</label>#}
        <div class="layui-input-block">
            <input id="i_title" type="text" name="spark_title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input ">
        </div>
        <div class="layui-form-item layui-form-text">
{#                <label class="layui-form-label">文本域</label>#}
            <div class="layui-input-block">
                <textarea id='i_content' name="spark_content" placeholder="请输入内容" class="layui-textarea " ></textarea>
                <textarea name="user_id" placeholder="" class="layui-textarea layui-hide" >{{ request.session.user_id }}</textarea> {# 传递user_id數據 #}
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" >
           <button class="layui-btn layui-layout-right" lay-submit lay-filter="submit_data">发布</button>
            </div>
        </div>
    </div>
</form>

    <hr/>
    {% for card in spark_list %}
        <div class="layui-main layui-card">
            <div class="layui-card-header layui-anim layui-anim-fadein"><a
                    href={% url 'sparkdetail'  card.id %}> {{ card.title }}</a></div>
            <div class="layui-card-body layui-anim layui-anim-fadein">
                <p>{{ now }}</p>
                <p class="layui-text">{{ card.spark_content }}</p>
                <a href="#"> <div class="div-three_mesg layui-icon layui-icon-praise"></div> </a> {# 点赞 #}
                <div class="div-three_mesg  layui-font-14 layui-font-orange ">{{ card.like }}</div>
                <div class="div-three_mesg layui-icon layui-icon-dialogue"></div>
                <div class="div-three_mesg  layui-font-14 layui-font-orange ">评论</div>
                <div class="div-three_mesg layui-icon layui-icon-username"><a href="#" class="layui-font-orange">{{ card.owner.user_name }}</a>
                </div>
                <div class="div-three_mesg layui-icon layui-icon-time layui-font-gray">  {{ card.created_time }}
                </div>
            </div>

        </div>

    {% endfor %}

    <span class="step-links" style="text-align: center;display:block;">
            {% if page_obj.has_previous %}
                {#            <a href="?page=1">第一页</a>#}
                <a href="?page={{ page_obj.previous_page_number }}">前一页</a>
            {% endif %}

        <span class="current">
                {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
            </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">下一页</a>
        {% endif %}
        </span>
</ul>
</body>
</html>